<template>
	<div>
		<div class="personalHeader">
			<div class="personalTop"></div>
			<div class="personalBottom">
				<img class="headerImg" :src="urlImg" alt />
				<div class="headerDeatil">
					<div class="headerName">{{ userInfo.name }}</div>
					<div class="headerPosition">{{ userInfo.department.title }} | {{ userInfo.position }}</div>
					<div class="headerIntroduce">{{ userInfo.autograph }}</div>
				</div>
				<div class="editBtn"><el-button class="editBtns" @click="navigationSelect('/EditPersonalInformation')">修改个人资料</el-button></div>
			</div>
		</div>
		<div class="content">
			<div class="left">
				<div class="main">
					<div class="headNav">
						<div :class="work == 0 ? 'seletheadNavText' : 'headNavText'" @click="work = 0">我的文章</div>
						<div :class="work == 1 ? 'seletheadNavText' : 'headNavText'" @click="work = 1">创新建议</div>
						<div :class="work == 2 ? 'seletheadNavText' : 'headNavText'" @click="work = 2">资源共享</div>
						<div :class="work == 3 ? 'seletheadNavText' : 'headNavText'" @click="work = 3">我的提问</div>
						<div :class="work == 4 ? 'seletheadNavText' : 'headNavText'" @click="work = 4">我的回答</div>
						<div :class="work == 5 ? 'seletheadNavText' : 'headNavText'" @click="work = 5">我的投票</div>
						<div :class="work == 6 ? 'seletheadNavText' : 'headNavText'" @click="work = 6">我的问卷</div>
						<div :class="work == 7 ? 'seletheadNavText' : 'headNavText'" @click="work = 7">草稿箱</div>
					</div>
					<el-divider></el-divider>
					<div class="work">
						<myInvitation v-if="work == 0"></myInvitation>
						<suggest v-if="work == 1"></suggest>
						<resource v-if="work == 2"></resource>
						<problem v-if="work == 3"></problem>
						<answer v-if="work == 4"></answer>
						<vote v-if="work == 5"></vote>
						<question v-if="work == 6"></question>
						<draft v-if="work == 7"></draft>
						<myPrivateLetter v-if="work == 8" :userid="userInfo._id"></myPrivateLetter>
						<myFollow v-if="work == 9" :userid="userInfo._id"></myFollow>
						<myCollection v-if="work == 10" :userid="userInfo._id"></myCollection>
						<myIntegral v-if="work == 11" :userid="userInfo._id"></myIntegral>

						<exchangeRecord :userid="userInfo._id" v-if="work == 12"></exchangeRecord>
						<task v-if="work == 13"></task>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="StatisticsBox">
					<div class="StatisticsList">
						<div class="StatisticsItem">
							<div class="StatisticsName">
								<i class="el-icon-trophy"></i>
								积分
							</div>
							<div class="StatisticsNum">{{ userStauts.integral }}</div>
						</div>
						<div class="StatisticsItem">
							<div class="StatisticsName">
								<i class="el-icon-edit"></i>
								发帖数
							</div>
							<div class="StatisticsNum">{{ userStauts.articleNum }}</div>
						</div>
					</div>
					<div class="StatisticsList">
						<div class="StatisticsItem">
							<div class="StatisticsName">
								<i class="el-icon-star-off"></i>
								评论数
							</div>
							<div class="StatisticsNum">{{ userStauts.commenteNum }}</div>
						</div>
						<div class="StatisticsItem">
							<div class="StatisticsName">
								<i class="el-icon-chat-line-round"></i>
								回答数
							</div>
							<div class="StatisticsNum">{{ userStauts.answerNum }}</div>
						</div>
					</div>
				</div>

				<div class="WorkBox">
					<div class="WorkList">
						<div class="WorkItem"><div :class="work == 8 ? 'seletheadNavText' : 'headNavText'" @click="work = 8">我的私信</div></div>
						<el-divider direction="vertical"></el-divider>

						<div class="WorkItem"><div :class="work == 9 ? 'seletheadNavText' : 'headNavText'" @click="work = 9">我的关注</div></div>
						<el-divider direction="vertical"></el-divider>

						<div class="WorkItem"><div :class="work == 10 ? 'seletheadNavText' : 'headNavText'" @click="work = 10">我的收藏</div></div>
					</div>
					<div class="WorkList">
						<div class="WorkItem"><div :class="work == 11 ? 'seletheadNavText' : 'headNavText'" @click="work = 11">我的积分</div></div>
						<el-divider direction="vertical"></el-divider>

						<div class="WorkItem"><div :class="work == 12 ? 'seletheadNavText' : 'headNavText'" @click="work = 12">兑换记录</div></div>
						<el-divider direction="vertical"></el-divider>
						<div class="WorkItem"><div :class="work == 13 ? 'seletheadNavText' : 'headNavText'" @click="work = 13">每日任务</div></div>
					</div>
				</div>

				<div class="footerBox">
					<div class="footNav">
						<span class="footItm" @click="navigationSelect('/home')">首页</span>
						<el-divider direction="vertical"></el-divider>
						<span class="footItm" @click="navigationSelect('/workVoting')">工作投票</span>
						<el-divider direction="vertical"></el-divider>
						<span class="footItm" @click="navigationSelect('/resourceSharing')">资源共享</span>
						<el-divider direction="vertical"></el-divider>
						<span class="footItm" @click="navigationSelect('/personalCenter')">个人中心</span>
					</div>
					<div class="website">
						<span class="footItm" @click="help = true">平台说明</span>
						<el-divider direction="vertical"></el-divider>
						<span class="footItm">珠海港官网</span>
					</div>
					<div class="website"><span>Copyright @2009-2015 珠海股份有限公司版权所有 粤ICP备2001032号-1</span></div>
					<div class="website"><span>地址:珠海市情侣路南路278号</span></div>
					<div class="website"><span>粤公网安备44049002000443号</span></div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="help">
			<help v-if="help"></help>
			<div slot="footer" class="dialog-footer">
				<el-button @click="help = false">取 消</el-button>
				<el-button type="primary" @click="help = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import draft from '@/components/Personal/draft';
import myInvitation from '@/components/Personal/myInvitation';
import suggest from '@/components/Personal/suggest';
import resource from '../../components/Personal/resource';
import problem from '../../components/Personal/problem';
import answer from '../../components/Personal/answer';
import task from '../../components/Personal/task';
import vote from '../../components/Personal/vote';
import question from '../../components/Personal/question';
import help from '@/components/help';

import myPrivateLetter from '@/components/Personal/myPrivateLetter';
import myFollow from '@/components/Personal/myFollow';
import myCollection from '@/components/Personal/myCollection';
import myIntegral from '@/components/Personal/myIntegral';
import exchangeRecord from '@/components/Personal/exchangeRecord';
import { defaultAvatarURL } from '../../utils/global';
import { getSituation } from '../../api/getSituation';

export default {
	name: 'personalCenter',
	data() {
		return {
			work: 0,
			userInfo: {},
			urlImg: '',
			userStauts: [],
			help: false
		};
	},
	watch: {
		async $route(newRouter) {
			//监听路由是否变化
			if (newRouter.path == '/personalCenter') {
				this.getSituation();
			}
		}
	},
	created() {
		console.log(this.$route.query);
		console.log(this.$store.getters.userInfo);
		this.getSituation();
		if (this.$store.getters.userInfo) {
			this.userInfo = this.$store.getters.userInfo;
			this.urlImg = defaultAvatarURL + this.userInfo.head_portrait;
		}

		if (this.$route.query.work) {
			this.work = parseInt(this.$route.query.work);
		}
	},

	components: {
		myInvitation,
		suggest,
		resource,
		problem,
		answer,
		task,
		myPrivateLetter,
		myFollow,
		myCollection,
		myIntegral,
		exchangeRecord,
		draft,
		vote,
		help,
		question
	},
	methods: {
		navigationSelect(path) {
			this.$router.push(path);
		},
		//获取作者状态
		async getSituation() {
			let stauts = await getSituation({
				userid: this.$store.getters.userInfo._id
			});
			console.log('stauts', stauts);
			this.userStauts = stauts.data;
		}
	}
};
</script>

<style lang="scss" scoped>
//头部
.personalHeader {
	min-height: 300px;
	min-width: 1400px;

	width: 100%;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	.personalTop {
		height: 140px;
		background-color: #1d2f70;
	}
	.personalBottom {
		position: relative;
		display: flex;
		height: 160px;
		.headerImg {
			width: 170px;
			height: 170px;
			border-radius: 50%;
			border: 3px solid #ffffff;
			background-color: #cec7c7;
			position: absolute;
			top: -80px;
			left: 80px;
		}
		.headerDeatil {
			width: 560px;
			height: 160px;
			margin: 0 auto;
			.headerName {
				font-size: 20px;
				font-weight: 550;
				margin: 10px 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.headerPosition {
				font-size: 14px;
				color: #a6a6a6;
				margin: 10px 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.headerIntroduce {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}
		.editBtn {
			width: 200px;
			height: 160px;
			display: flex;
			align-items: center;
			.editBtns {
				background-color: #1b4cc8;
				color: #ffffff;
				height: 48px;
			}
		}
	}
}
//内容
.content {
	display: flex;
	min-width: 1400px;
	justify-content: space-between;
	margin-top: 20px;
	.left {
		width: 74%;
		min-width: 1000px;
		.main {
			border: 3px solid #ffffff;
			min-height: 600px;
			background-color: #ffffff;
			.work {
				width: 90%;
				margin: 0 auto;
			}
		}
		.headNav {
			display: flex;
			color: #6c6c6c;
			padding-top: 20px;
			.headNavText {
				font-size: 18px;
				margin-right: 25px;
				margin-left: 25px;
				cursor: pointer;
				&:hover {
					color: #1d2f70;
					font-weight: 600;
				}
			}
			.seletheadNavText {
				font-size: 18px;
				margin-right: 25px;
				margin-left: 25px;
				color: #1d2f70;
				font-weight: 600;
				cursor: pointer;
			}
		}
	}

	.right {
		width: 25%;
		.StatisticsBox {
			min-height: 240px;
			background: #fff;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.StatisticsList {
				display: flex;
				justify-content: space-around;
				height: 100px;
				align-items: center;
				.StatisticsItem {
					display: flex;
					height: 60px;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					color: #505050;
					.StatisticsName {
						font-size: 14px;
					}
					.StatisticsNum {
						font-weight: 550;
						font-size: 18px;
					}
				}
			}
		}
		.WorkBox {
			min-height: 240px;
			background: #fff;
			border-radius: 10px;
			display: flex;
			margin: 20px 0;
			flex-direction: column;
			justify-content: center;
			.WorkList {
				display: flex;
				justify-content: center;
				height: 100px;
				align-items: center;
				.WorkItem {
					display: flex;
					width: 80px;
					height: 60px;
					margin: 0 10px;
					justify-content: center;
					text-align: center;
					align-items: center;
					color: #505050;
					.headNavText {
						cursor: pointer;
						&:hover {
							color: #1d2f70;
							font-weight: 600;
						}
					}
					.seletheadNavText {
						color: #1d2f70;
						font-weight: 600;
						cursor: pointer;
					}
				}
			}
		}
		.footerBox {
			min-height: 180px;
			background: #fff;
			margin-top: 20px;
			border-radius: 10px;
			padding: 20px;
			color: #6c6c6c;
			.footNav {
				width: 290px;
				margin: 0 auto;
			}
			.website {
				text-align: center;
				margin-top: 10px;
			}
			.footItm {
				cursor: pointer;
				&:hover {
					color: #1d2f70;
					font-weight: 600;
				}
			}
		}
	}
}
</style>
